<template>
  <view>
   <view class="category">
      <YgSearch></YgSearch>
      <view class="main">
        <view class="menu">
          <view class="menu-item" v-for="item1 in menus" :key="item1">{{item1}}</view>
        </view>
        <view class="content">
          <view class="group"  v-for="item in goods" :key="item.cat_id">
          <view class="content-title">{{item.cat_name}}</view>
          <view class="goods-content">
            <navigator  v-for="item1 in item.children" :key="item1.cat_id">
              <image  :src="item1.cat_icon" mode="widthFix" />
              <view class="goods-name">{{item1.cat_name}}</view>
            </navigator>
          </view> 
           </view>
        </view>
      </view>
   </view>
  </view>
</template>

<script>
export default {
  data(){
    return {
      // 左侧标题菜单
      menus:[""],
      // 右侧的商品数据
      goods:[]
    }
  },
  async onLoad(){
    const res=await this.$u.api.getCategories()
    console.log(res);
    this.menus=res.message.map((v)=>v.cat_name)
    this.goods=res.message[0].children
  }
};
</script>



<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
    .menu {
      width: 182rpx;
      overflow: auto;
      .menu-item {
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .content-title {
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &::before,
        &::after {
          content: "/";
        }
      }
      .goods-content {
        display: flex;
        flex-wrap: wrap;
        navigator {
          width: 33.33%;
          padding: 10rpx;
          box-sizing: border-box;
          text-align: center;
          image {
            width: 70%;
          }
          .goods-name {
          }
        }
      }
    }
  }
}
</style>